<template>
	<div style="position: relative;">
			<section style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;">
				<img style="width: 100%; height: 100%;" src="../../static/images/re2.png">
			</section>
			<section style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 6;background: rgba(0,0,0,0.3);"></section>
		<section style="height: 28rem;width: 100%;z-index: 10;position: relative;margin-top: 7rem;display: flex;justify-content: center;align-items: center;">
			<section class="loginBg">
				<p style="text-align: center;font-size: 1.4rem;color: white;letter-spacing: 0.2rem;">用户注册</p>
				<section class="login-frame center-mid" >
					<mu-icon value="account_circle" color="white" style="padding-right: 0.4rem;" />
					<input type="text" placeholder="请输入用户名" v-model="username"   />
				</section>
				<section class="login-frame center-mid" style="margin-top: 0.6rem;">
					<mu-icon value="lock_outline" color="white" style="padding-right: 0.4rem;" />
					<input type="password" placeholder="请输入密码" v-model="password"   />
				</section>
				<section class="login-frame center-mid" style="margin-top: 0.6rem;">
					<mu-icon value="phone" color="white" style="padding-right: 0.4rem;" />
					<input style="width: 65%;padding-right: 5%;" type="text" placeholder="请输入手机号" v-model="phoneNumber"/>
					<span style="color: white;font-size: 0.9rem;width: 30%;display: block;border-left: 1px solid rgba(255,255,255,0.56);">获取验证码</span>
				</section>
				<section class="login-frame center-mid" >
					<mu-icon value="account_circle" color="white" style="padding-right: 0.4rem;" />
					<input type="text" placeholder="请输入邮箱号" v-model="emailNumber"   />
				</section>
				<section class="login-frame center-mid" style="margin-top: 0.6rem;">
					<mu-icon value="verified_user" color="white" style="padding-right: 0.4rem;" />
					<input type="text" placeholder="请输入验证码"   />
				</section>
				
				<mu-flat-button class="mu-loginBtn" labelClass="mu-label" label="注册" @click="register()" />
				</mu-flat-button>
				
				<section style="">
					
				</section>
			</section>
			
			
		</section>
	</div>
</template>

<script>
	export default {
		data(){
			return{
//				loginBg:'static/images/bgDone11.jpg',
				username:'',
				password:'',
				phoneNumber:'',
				emailNumber:''
			}
		},
		methods:{
			register(){
				console.info('注册')
				let that=this
				that.axios.post('/wechatsip/Login/register',
				{
					"username":that.username,
					"password":that.password,
					"email":that.emailNumber,
					"mobile":that.phoneNumber
				}).then(function(response){
					console.log(response.data)
//					console.log('注册成功')
				}).catch(function(error){
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
.loginBg{
	width: 86%;
	height: 100%;
	/*background: skyblue;*/
}
.center-mid{
	justify-content: center;
	align-items: center;
}
.login-frame{
	background-color:rgba(255,255,255,0);
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 0;
	font-family: "微软雅黑";
	border-bottom: 1px solid rgba(255,255,255,0.6);
}
.login-frame:nth-child(1){
	border-bottom: 1px solid #b5b3be;
}
/*.login-strip input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#fff;
	color:#fff
}*/


.login-frame label{
	flex: 1.2; 
	color: #9e9e9e;
	text-align: center;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/*border: 1px solid #CCC!important;*/
}
.login-frame label{
	color:#989898
}
.login-frame input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:white;
	color:white !important;
	font-size: 0.9rem;
	 /*-webkit-box-shadow: 0 0 0 0.8rem #fff inset;*/
}
.mu-loginBtn{
	color: white !important;
	border-radius: 50px !important;
	height: 2.6rem !important;
	background-color: #0090ff !important;
	width: 100%;
	margin-top: 2rem !important;

}
</style>